 <template>
  <div class="hot">
    <div class="hot-banner">
      <div class="hotopct">
        <div class="hot-banner2"></div>
        <div class="hottime">更新日期：08月03日</div>
      </div>
    </div>
    <van-list
      v-model="loading"
      :error.sync="error"
      error-text="查看完整榜单 >"
      @load="onLoad"
    >
      <van-cell
        v-for="(item,index) in list"
        :key="item.id"
        @click="routerlist(index)"
      >
        <template #title>
          <div class="list1">
            {{index+1}}
          </div>
          <div class="sgfr f-bd f-bd-btm">
            <div class="sgchfl">
              <div class="f-thide sgtl">{{item.name}}</div>
              <div class="f-thide sginfo"><i class="u-hmsprt sghot"></i>{{item.ar[0].name}} - {{item.name}}</div>
            </div>
            <div class="sgchfr"><span class="u-hmsprt sgchply"></span></div>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>
 <script>
import { getHotList } from '../../../api/hot'
export default {
  data: () => ({
    list: [],
    error: true,
    loading: false,
  }),
  methods: {
    async getHotList() {
      const res = await getHotList()
      console.log(res);
      for (let i = 0; i < 20; i++) {
        this.list.push(res.data.songs[i])
      }
    },
    routerlist(index) {
      this.$router.push({ path: '/hotinfo', query: { id: this.list[index].id } })
    },
    onLoad() {
      this.$router.push('/hotlogin')
    },
  },
  created() {
    this.getHotList()
  }
}
 </script>
 <style lang="less" scoped>
.hot {
  .hot-banner {
    width: 100%;
    height: 146px;
    position: relative;
    background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=)
      no-repeat center/100% 100%;
    .hotopct {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      padding-left: 20px;
      box-sizing: border-box;

      .hot-banner2 {
        width: 142px;
        height: 67px;
        background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
          no-repeat;
        background-size: 166px 97px;
        background-position: -24px -30px;
      }
      .hottime {
        margin-top: 10px;
        color: hsla(0, 0%, 100%, 0.8);
        font-size: 12px;
      }
    }
  }
  .van-cell::after {
    border-bottom: 0;
  }
  .van-cell {
    padding-left: 10px;
    height: 55px;
    padding-right: 4px;
    .list1 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      font-size: 17px;
      margin-left: -10px;
    }
  }
}
.van-cell__title {
  display: flex;
  .f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    font-size: 17px;
  }
  .sginfo {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
  }
  .u-hmsprt {
    background-position: -24px 0;
    background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
      no-repeat;
    background-size: 166px 97px;
  }
}
.sghot {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 4px;
}
.sgchfr {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  .u-hmsprt {
    background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
      no-repeat;
    background-size: 166px 97px;
  }
  .sgchply {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: -24px 0;
  }
}
.sgfr {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>